<template>
    <div class="schedule-page">
        <!-- 左側面板: 迷你日曆 + 待辦事項 -->
        <div class="left-panel">
            <!-- 迷你日曆 -->
            <div class="mini-calendar">
                <div class="calendar-header">
                    <button @click="prevMonth">&lt;</button>
                    <div class="month-title">{{ currentMonth }}</div>
                    <button @click="nextMonth">&gt;</button>
                </div>
                <div class="calendar-grid">
                    <div class="day-names">
                        <div v-for="day in ['日', '一', '二', '三', '四', '五', '六']" :key="day">{{ day }}</div>
                    </div>
                    <div class="days-grid">
                        <div v-for="day in calendarDays" :key="day.date" :class="{
                            'other-month': !day.isCurrentMonth,
                            'today': day.isToday,
                            'selected': day.isSelected
                        }" @click="selectDate(day.date)">
                            {{ day.date.getDate() }}
                        </div>
                    </div>
                </div>
            </div>

            <!-- 待辦事項列表 -->
            <div class="todo-list">
                <div class="todo-header">
                    <h3>待辦事項 ({{ selectedDate.getDate() }}/{{ selectedDate.getMonth() + 1 }})</h3>
                    <button @click="showAddTodo = true">+ 新增</button>
                </div>
                <div class="todo-items">
                    <div v-for="(todo, index) in filteredTodos" :key="index" class="todo-item"
                        :class="{ 'completed': todo.completed }">
                        <input type="checkbox" v-model="todo.completed" @change="saveTodos">
                        <span>{{ todo.time }} {{ todo.title }}</span>
                        <button @click="removeTodo(index)">×</button>
                    </div>
                    <div v-if="filteredTodos.length === 0" class="empty-todos">
                        暫無待辦事項
                    </div>
                </div>
            </div>
        </div>

        <!-- 右側面板: 主日曆視圖 -->
        <div class="right-panel">
            <div class="calendar-controls">
                <div class="view-options">
                    <button v-for="view in ['日', '周', '月', '年']" :key="view" :class="{ 'active': currentView === view }"
                        @click="currentView = view">
                        {{ view }}
                    </button>
                </div>
                <div class="calendar-navigation">
                    <button @click="navigateCalendar('prev')">&lt;</button>
                    <div class="current-range">{{ currentRangeText }}</div>
                    <button @click="navigateCalendar('next')">&gt;</button>
                    <button @click="goToday">今天</button>
                </div>
            </div>

            <!-- 日視圖 -->
            <div v-if="currentView === '日'" class="day-view">
                <div class="day-header">
                    {{ formatDate(displayDate, 'YYYY年MM月DD日 dddd') }}
                </div>
                <div class="time-slots">
                    <div v-for="hour in 24" :key="hour" class="time-slot" @click="addEventForHour(hour - 1)">
                        <div class="time-label">{{ hour - 1 }}:00</div>
                        <div class="time-events">
                            <div v-for="event in getEventsForHour(hour - 1)" :key="event.id" class="calendar-event"
                                :style="{ backgroundColor: event.color }" @click.stop="showEventDetails(event)">
                                <div class="event-time">{{ formatTime(event.startTime) }}</div>
                                <div class="event-title">{{ event.title }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 周視圖 -->
            <div v-if="currentView === '周'" class="week-view">
                <div class="week-header">
                    <div v-for="day in weekDays" :key="day.date.toString()" :class="{ 'today': isToday(day.date) }">
                        <div>{{ day.name }}</div>
                        <div>{{ day.date.getDate() }}</div>
                    </div>
                </div>
                <div class="week-body">
                    <div v-for="day in weekDays" :key="day.date.toString()" :class="{ 'today': isToday(day.date) }">
                        <div v-for="event in getEventsForDate(day.date)" :key="event.id" class="calendar-event"
                            :style="{ backgroundColor: event.color }" @click="showEventDetails(event)">
                            <div class="event-time">{{ formatTime(event.startTime) }}</div>
                            <div class="event-title">{{ event.title }}</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 月視圖 -->
            <div v-if="currentView === '月'" class="month-view">
                <div class="month-grid">
                    <div class="day-names">
                        <div v-for="day in ['日', '一', '二', '三', '四', '五', '六']" :key="day">{{ day }}</div>
                    </div>
                    <div class="month-days">
                        <div v-for="day in monthDays" :key="day.date.toString()" :class="{
                            'other-month': !day.isCurrentMonth,
                            'today': isToday(day.date),
                            'has-events': getEventsForDate(day.date).length > 0
                        }" @click="selectMonthDay(day.date)">
                            <div>{{ day.date.getDate() }}</div>
                            <div class="event-dots">
                                <span v-for="event in getEventsForDate(day.date)" :key="event.id"
                                    :style="{ backgroundColor: event.color }"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 年視圖 -->
            <div v-if="currentView === '年'" class="year-view">
                <div class="year-header">{{ displayDate.getFullYear() }}年</div>
                <div class="months-grid">
                    <div v-for="month in 12" :key="month" class="month-cell" @click="selectMonth(month)">
                        <div>{{ month }}月</div>
                        <div class="month-events">
                            <span v-for="event in getEventsForMonth(month)" :key="event.id"
                                :style="{ backgroundColor: event.color }"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 新增待辦事項模態框 -->
        <div v-if="showAddTodo" class="modal">
            <div class="modal-content">
                <h3>新增待辦事項</h3>
                <div class="form-group">
                    <label>標題</label>
                    <input v-model="newTodo.title" placeholder="輸入待辦事項標題">
                </div>
                <div class="form-group">
                    <label>時間</label>
                    <input type="time" v-model="newTodo.time">
                </div>
                <div class="button-group">
                    <button @click="showAddTodo = false">取消</button>
                    <button @click="addTodo">保存</button>
                </div>
            </div>
        </div>

        <!-- 事件詳情模態框 -->
        <div v-if="selectedEvent" class="modal">
            <div class="modal-content">
                <h3>{{ selectedEvent.title }}</h3>
                <div class="event-detail">
                    <span>時間:</span> {{ formatDateTime(selectedEvent.startTime, selectedEvent.endTime) }}
                </div>
                <div class="event-detail" v-if="selectedEvent.description">
                    <span>描述:</span> {{ selectedEvent.description }}
                </div>
                <div class="button-group">
                    <button @click="selectedEvent = null">關閉</button>
                    <button @click="deleteEvent(selectedEvent.id)" class="delete-btn">刪除</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

// 響應式數據
const currentView = ref('月')
const displayDate = ref(new Date())
const selectedDate = ref(new Date())
const showAddTodo = ref(false)
const selectedEvent = ref(null)
const newTodo = ref({
    title: '',
    time: '09:00',
    date: new Date()
})
const todos = ref([])
const events = ref([
    {
        id: 1,
        title: '團隊會議',
        startTime: new Date(new Date().setHours(9, 0, 0, 0)),
        endTime: new Date(new Date().setHours(10, 0, 0, 0)),
        color: '#5B8FF9',
        description: '每周團隊進度會議'
    },
    {
        id: 2,
        title: '客戶會議',
        startTime: new Date(new Date().setHours(14, 0, 0, 0)),
        endTime: new Date(new Date().setHours(15, 30, 0, 0)),
        color: '#5BD8A6',
        description: '討論項目需求'
    }
])

// 計算屬性
const currentMonth = computed(() => {
    const months = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
    return `${selectedDate.value.getFullYear()}年 ${months[selectedDate.value.getMonth()]}`
})

const calendarDays = computed(() => {
    const year = selectedDate.value.getFullYear()
    const month = selectedDate.value.getMonth()
    const firstDay = new Date(year, month, 1)
    const lastDay = new Date(year, month + 1, 0)

    const startDay = firstDay.getDay()
    const daysFromPrevMonth = startDay
    const prevMonthLastDay = new Date(year, month, 0).getDate()
    const nextMonthDays = 42 - (lastDay.getDate() + daysFromPrevMonth)

    const days = []

    // 上個月的日期
    for (let i = daysFromPrevMonth - 1; i >= 0; i--) {
        const date = new Date(year, month - 1, prevMonthLastDay - i)
        days.push({
            date,
            isCurrentMonth: false,
            isToday: isToday(date),
            isSelected: isSameDay(date, selectedDate.value)
        })
    }

    // 當前月的日期
    for (let i = 1; i <= lastDay.getDate(); i++) {
        const date = new Date(year, month, i)
        days.push({
            date,
            isCurrentMonth: true,
            isToday: isToday(date),
            isSelected: isSameDay(date, selectedDate.value)
        })
    }

    // 下個月的日期
    for (let i = 1; i <= nextMonthDays; i++) {
        const date = new Date(year, month + 1, i)
        days.push({
            date,
            isCurrentMonth: false,
            isToday: isToday(date),
            isSelected: isSameDay(date, selectedDate.value)
        })
    }

    return days
})

const filteredTodos = computed(() => {
    return todos.value.filter(todo =>
        isSameDay(new Date(todo.date), selectedDate.value)
    ).sort((a, b) => a.time.localeCompare(b.time))
})

const weekDays = computed(() => {
    const date = new Date(displayDate.value)
    const dayOfWeek = date.getDay()
    const startDate = new Date(date)
    startDate.setDate(date.getDate() - dayOfWeek)

    const days = []
    for (let i = 0; i < 7; i++) {
        const currentDate = new Date(startDate)
        currentDate.setDate(startDate.getDate() + i)
        days.push({
            date: currentDate,
            name: ['日', '一', '二', '三', '四', '五', '六'][i]
        })
    }
    return days
})

const monthDays = computed(() => {
    const year = displayDate.value.getFullYear()
    const month = displayDate.value.getMonth()
    const firstDay = new Date(year, month, 1)
    const lastDay = new Date(year, month + 1, 0)

    const startDay = firstDay.getDay()
    const daysFromPrevMonth = startDay
    const prevMonthLastDay = new Date(year, month, 0).getDate()
    const nextMonthDays = 42 - (lastDay.getDate() + daysFromPrevMonth)

    const days = []

    // 上個月的日期
    for (let i = daysFromPrevMonth - 1; i >= 0; i--) {
        const date = new Date(year, month - 1, prevMonthLastDay - i)
        days.push({
            date,
            isCurrentMonth: false
        })
    }

    // 當前月的日期
    for (let i = 1; i <= lastDay.getDate(); i++) {
        const date = new Date(year, month, i)
        days.push({
            date,
            isCurrentMonth: true
        })
    }

    // 下個月的日期
    for (let i = 1; i <= nextMonthDays; i++) {
        const date = new Date(year, month + 1, i)
        days.push({
            date,
            isCurrentMonth: false
        })
    }

    return days
})

// 解決 ESLint no-case-declarations 錯誤的方法
const currentRangeText = computed(() => {
    const view = currentView.value
    const date = displayDate.value

    if (view === '日') {
        return formatDate(date, 'YYYY年MM月DD日')
    }

    if (view === '周') {
        const start = new Date(weekDays.value[0].date)
        const end = new Date(weekDays.value[6].date)
        return `${formatDate(start, 'MM/DD')} - ${formatDate(end, 'MM/DD')}`
    }

    if (view === '月') {
        return formatDate(date, 'YYYY年MM月')
    }

    if (view === '年') {
        return date.getFullYear() + '年'
    }

    return ''
})

// 方法
const isToday = (date) => {
    const today = new Date()
    return date.getDate() === today.getDate() &&
        date.getMonth() === today.getMonth() &&
        date.getFullYear() === today.getFullYear()
}

const isSameDay = (date1, date2) => {
    return date1.getDate() === date2.getDate() &&
        date1.getMonth() === date2.getMonth() &&
        date1.getFullYear() === date2.getFullYear()
}

const selectDate = (date) => {
    selectedDate.value = new Date(date)
}

const prevMonth = () => {
    const date = new Date(selectedDate.value)
    date.setMonth(date.getMonth() - 1)
    selectedDate.value = date
}

const nextMonth = () => {
    const date = new Date(selectedDate.value)
    date.setMonth(date.getMonth() + 1)
    selectedDate.value = date
}

const navigateCalendar = (direction) => {
    const date = new Date(displayDate.value)
    const view = currentView.value

    if (direction === 'prev') {
        if (view === '日') date.setDate(date.getDate() - 1)
        if (view === '周') date.setDate(date.getDate() - 7)
        if (view === '月') date.setMonth(date.getMonth() - 1)
        if (view === '年') date.setFullYear(date.getFullYear() - 1)
    } else if (direction === 'next') {
        if (view === '日') date.setDate(date.getDate() + 1)
        if (view === '周') date.setDate(date.getDate() + 7)
        if (view === '月') date.setMonth(date.getMonth() + 1)
        if (view === '年') date.setFullYear(date.getFullYear() + 1)
    }

    displayDate.value = date
}

const goToday = () => {
    const today = new Date()
    displayDate.value = new Date(today)
    selectedDate.value = new Date(today)
    currentView.value = '日'
}

const addTodo = () => {
    if (!newTodo.value.title) return

    const [hours, minutes] = newTodo.value.time.split(':').map(Number)
    const todoDate = new Date(selectedDate.value)
    todoDate.setHours(hours, minutes, 0, 0)

    todos.value.push({
        id: Date.now(),
        title: newTodo.value.title,
        time: newTodo.value.time,
        date: todoDate,
        completed: false
    })

    saveTodos()
    showAddTodo.value = false
    newTodo.value.title = ''
    newTodo.value.time = '09:00'
}

const removeTodo = (index) => {
    todos.value.splice(index, 1)
    saveTodos()
}

const saveTodos = () => {
    localStorage.setItem('todos', JSON.stringify(todos.value))
}

const loadTodos = () => {
    const savedTodos = localStorage.getItem('todos')
    if (savedTodos) {
        todos.value = JSON.parse(savedTodos).map(todo => ({
            ...todo,
            date: new Date(todo.date)
        }))
    }
}

const getEventsForDate = (date) => {
    return events.value.filter(event =>
        isSameDay(event.startTime, date)
    ).sort((a, b) => a.startTime - b.startTime)
}

const getEventsForHour = (hour) => {
    const date = new Date(displayDate.value)
    date.setHours(hour, 0, 0, 0)

    return events.value.filter(event =>
        isSameDay(event.startTime, date) &&
        event.startTime.getHours() === hour
    ).sort((a, b) => a.startTime - b.startTime)
}

const getEventsForMonth = (month) => {
    const year = displayDate.value.getFullYear()
    return events.value.filter(event =>
        event.startTime.getFullYear() === year &&
        event.startTime.getMonth() + 1 === month
    )
}

const addEventForHour = (hour) => {
    const date = new Date(displayDate.value)
    date.setHours(hour, 0, 0, 0)

    const title = prompt('輸入事件標題:')
    if (title) {
        const id = Date.now()
        events.value.push({
            id,
            title,
            startTime: new Date(date),
            endTime: new Date(date.getTime() + 60 * 60 * 1000),
            color: getRandomColor(),
            description: ''
        })
    }
}

const showEventDetails = (event) => {
    selectedEvent.value = event
}

const deleteEvent = (id) => {
    events.value = events.value.filter(event => event.id !== id)
    selectedEvent.value = null
}

const selectMonthDay = (date) => {
    displayDate.value = new Date(date)
    currentView.value = '日'
}

const selectMonth = (month) => {
    const date = new Date(displayDate.value)
    date.setMonth(month - 1)
    displayDate.value = date
    currentView.value = '月'
}

const getRandomColor = () => {
    const colors = ['#5B8FF9', '#5BD8A6', '#F6BD16', '#E8684A', '#A17ADE', '#36CBCB']
    return colors[Math.floor(Math.random() * colors.length)]
}

const formatDate = (date, formatStr) => {
    if (!date) return ''

    const year = date.getFullYear()
    const month = (date.getMonth() + 1).toString().padStart(2, '0')
    const day = date.getDate().toString().padStart(2, '0')
    const hours = date.getHours().toString().padStart(2, '0')
    const minutes = date.getMinutes().toString().padStart(2, '0')

    const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
    const weekday = weekdays[date.getDay()]

    return formatStr
        .replace('YYYY', year)
        .replace('MM', month)
        .replace('DD', day)
        .replace('dddd', weekday)
        .replace('HH', hours)
        .replace('mm', minutes)
}

const formatTime = (date) => {
    if (!date) return ''
    return formatDate(date, 'HH:mm')
}

const formatDateTime = (start, end) => {
    if (!start || !end) return ''
    return `${formatDate(start, 'YYYY/MM/DD HH:mm')} - ${formatTime(end)}`
}

// 組件掛載時加載待辦事項
onMounted(() => {
    loadTodos()
})
</script>

<style scoped lang="less">
/* 基礎樣式 */
.schedule-page {
    display: flex;
    height: 100vh;
    overflow: hidden;
    background-color: #f8f9fa;
    font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    color: #333;
    line-height: 1.5;

    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    button {
        cursor: pointer;
        border: none;
        background: none;
        font-family: inherit;
        transition: all 0.2s;

        &:hover {
            opacity: 0.8;
        }

        &:active {
            transform: scale(0.98);
        }
    }
}

/* 左側面板 */
.left-panel {
    width: 320px;
    background-color: #fff;
    border-right: 1px solid #eaeaea;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 迷你日曆 */
.mini-calendar {
    padding: 16px;
    border-bottom: 1px solid #eaeaea;

    .calendar-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;

        button {
            width: 32px;
            height: 32px;
            border-radius: 4px;
            background-color: #f8f9fa;
            color: #666;
            font-weight: bold;

            &:hover {
                background-color: #e9ecef;
            }
        }

        .month-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
        }
    }

    .calendar-grid {
        .day-names {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            text-align: center;
            margin-bottom: 8px;
            font-size: 12px;
            color: #666;
        }

        .days-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 4px;

            >div {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 32px;
                border-radius: 4px;
                font-size: 14px;
                cursor: pointer;
                transition: all 0.2s;

                &.other-month {
                    color: #ccc;
                }

                &.today {
                    background-color: #f0f7ff;
                    color: #5B8FF9;
                    font-weight: bold;
                }

                &.selected {
                    background-color: #5B8FF9;
                    color: white;
                    font-weight: bold;
                }

                &:hover:not(.selected) {
                    background-color: #f8f9fa;
                }
            }
        }
    }
}

/* 待辦事項 */
.todo-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .todo-header {
        padding: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #eaeaea;

        h3 {
            font-size: 16px;
            font-weight: 600;
        }

        button {
            padding: 4px 12px;
            background-color: #5B8FF9;
            color: white;
            border-radius: 4px;
            font-size: 14px;
        }
    }

    .todo-items {
        flex: 1;
        overflow-y: auto;
        padding: 8px 16px;

        .todo-item {
            display: flex;
            align-items: center;
            padding: 8px;
            margin-bottom: 8px;
            border-radius: 4px;
            background-color: #fff;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

            input[type="checkbox"] {
                margin-right: 8px;
                cursor: pointer;
            }

            span {
                flex: 1;
                font-size: 14px;
            }

            button {
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background-color: #E8684A;
                color: white;
                font-size: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            &.completed {
                opacity: 0.7;

                span {
                    text-decoration: line-through;
                    color: #666;
                }
            }
        }

        .empty-todos {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100px;
            color: #666;
            font-size: 14px;
        }
    }
}

/* 右側面板 */
.right-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .calendar-controls {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px;
        background-color: #fff;
        border-bottom: 1px solid #eaeaea;

        .view-options {
            display: flex;
            gap: 8px;

            button {
                padding: 6px 12px;
                border-radius: 4px;
                font-size: 14px;
                background-color: #f8f9fa;
                color: #666;

                &.active {
                    background-color: #5B8FF9;
                    color: white;
                }
            }
        }

        .calendar-navigation {
            display: flex;
            align-items: center;
            gap: 12px;

            button {
                width: 32px;
                height: 32px;
                border-radius: 4px;
                background-color: #f8f9fa;
                color: #666;
                font-weight: bold;

                &:hover {
                    background-color: #e9ecef;
                }
            }

            .current-range {
                font-size: 16px;
                font-weight: 600;
                min-width: 200px;
                text-align: center;
            }
        }
    }
}

/* 日視圖 */
.day-view {
    flex: 1;
    overflow-y: auto;
    padding: 16px;

    .day-header {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 16px;
        padding-bottom: 8px;
        border-bottom: 1px solid #eaeaea;
    }

    .time-slots {
        .time-slot {
            display: flex;
            height: 60px;
            border-bottom: 1px solid #eaeaea;
            position: relative;

            &:hover {
                background-color: #f8f9fa;
            }

            .time-label {
                width: 60px;
                font-size: 12px;
                color: #666;
                padding-top: 4px;
            }

            .time-events {
                flex: 1;
                position: relative;

                .calendar-event {
                    position: absolute;
                    left: 0;
                    right: 0;
                    padding: 4px 8px;
                    border-radius: 4px;
                    color: white;
                    font-size: 12px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    cursor: pointer;
                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

                    .event-time {
                        font-weight: bold;
                        margin-bottom: 2px;
                    }
                }
            }
        }
    }
}

/* 周視圖 */
.week-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .week-header {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        text-align: center;
        padding: 8px 0;
        border-bottom: 1px solid #eaeaea;
        background-color: #fff;

        >div {
            padding: 8px;

            &.today {
                color: #5B8FF9;
                font-weight: bold;
            }

            >div:first-child {
                font-size: 14px;
                margin-bottom: 4px;
            }

            >div:last-child {
                font-size: 18px;
                font-weight: 600;
            }
        }
    }

    .week-body {
        flex: 1;
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        overflow-y: auto;

        >div {
            border-right: 1px solid #eaeaea;
            border-bottom: 1px solid #eaeaea;
            min-height: 100px;
            padding: 4px;
            position: relative;

            &.today {
                background-color: #f0f7ff;
            }

            .calendar-event {
                padding: 4px 6px;
                margin-bottom: 4px;
                border-radius: 4px;
                color: white;
                font-size: 12px;
                overflow: hidden;
                cursor: pointer;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

                .event-time {
                    font-weight: bold;
                    margin-bottom: 2px;
                }
            }
        }
    }
}

/* 月視圖 */
.month-view {
    flex: 1;
    padding: 16px;

    .month-grid {
        height: 100%;
        display: flex;
        flex-direction: column;

        .day-names {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            text-align: center;
            margin-bottom: 8px;
            font-size: 14px;
            color: #666;
        }

        .month-days {
            flex: 1;
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            grid-template-rows: repeat(6, 1fr);
            gap: 8px;

            >div {
                background-color: #fff;
                border-radius: 4px;
                padding: 8px;
                cursor: pointer;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                transition: all 0.2s;

                &:hover {
                    transform: translateY(-2px);
                }

                >div:first-child {
                    font-size: 14px;
                    margin-bottom: 4px;
                }

                &.other-month {
                    opacity: 0.4;
                }

                &.today {
                    background-color: #f0f7ff;

                    >div:first-child {
                        color: #5B8FF9;
                        font-weight: bold;
                    }
                }

                &.has-events {
                    .event-dots {
                        display: flex;
                        flex-wrap: wrap;
                        gap: 4px;

                        span {
                            width: 8px;
                            height: 8px;
                            border-radius: 50%;
                            display: inline-block;
                        }
                    }
                }
            }
        }
    }
}

/* 年視圖 */
.year-view {
    flex: 1;
    padding: 16px;

    .year-header {
        font-size: 20px;
        font-weight: 600;
        text-align: center;
        margin-bottom: 24px;
    }

    .months-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;

        .month-cell {
            background-color: #fff;
            border-radius: 8px;
            padding: 16px;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

            &:hover {
                transform: translateY(-4px);
            }

            >div:first-child {
                font-size: 16px;
                font-weight: 600;
                margin-bottom: 8px;
            }

            .month-events {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: 4px;

                span {
                    width: 6px;
                    height: 6px;
                    border-radius: 50%;
                    display: inline-block;
                }
            }
        }
    }
}

/* 模態框 */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;

    .modal-content {
        background-color: #fff;
        border-radius: 8px;
        width: 400px;
        max-width: 90%;
        padding: 24px;
        animation: modalFadeIn 0.3s;

        h3 {
            font-size: 18px;
            margin-bottom: 16px;
            color: #333;
        }

        .form-group {
            margin-bottom: 16px;

            label {
                display: block;
                margin-bottom: 8px;
                font-size: 14px;
                color: #666;
            }

            input {
                width: 100%;
                padding: 8px 12px;
                border: 1px solid #eaeaea;
                border-radius: 4px;
                font-size: 14px;

                &:focus {
                    outline: none;
                    border-color: #5B8FF9;
                }
            }
        }

        .event-detail {
            margin-bottom: 12px;
            font-size: 14px;

            span {
                font-weight: 600;
                color: #666;
            }
        }

        .button-group {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
            margin-top: 24px;

            button {
                padding: 8px 16px;
                border-radius: 4px;
                font-size: 14px;

                &.delete-btn {
                    background-color: #E8684A;
                    color: white;
                }

                &:not(.delete-btn) {
                    background-color: #f8f9fa;
                    color: #666;
                }

                &:last-child {
                    background-color: #5B8FF9;
                    color: white;
                }
            }
        }
    }
}

/* 動畫 */
@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 響應式設計 */
@media (max-width: 992px) {
    .schedule-page {
        flex-direction: column;
    }

    .left-panel {
        width: 100%;
        height: auto;
        border-right: none;
        border-bottom: 1px solid #eaeaea;
    }

    .right-panel {
        height: calc(100vh - 400px);
    }

    .year-view .months-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .calendar-controls {
        flex-direction: column;
        gap: 12px;

        .view-options {
            width: 100%;
            justify-content: center;
        }
    }

    .year-view .months-grid {
        grid-template-columns: 1fr;
    }

    .modal .modal-content {
        width: 95%;
        padding: 16px;
    }
}

/* 事件顏色 */
.calendar-event {
    &.color-1 {
        background-color: #5B8FF9;
    }

    &.color-2 {
        background-color: #5BD8A6;
    }

    &.color-3 {
        background-color: #F6BD16;
    }

    &.color-4 {
        background-color: #E8684A;
    }

    &.color-5 {
        background-color: #A17ADE;
    }

    &.color-6 {
        background-color: #36CBCB;
    }
}

.event-dots span,
.month-events span {
    &.color-1 {
        background-color: #5B8FF9;
    }

    &.color-2 {
        background-color: #5BD8A6;
    }

    &.color-3 {
        background-color: #F6BD16;
    }

    &.color-4 {
        background-color: #E8684A;
    }

    &.color-5 {
        background-color: #A17ADE;
    }

    &.color-6 {
        background-color: #36CBCB;
    }
}
</style>